<template>
    <div>
        <a-calendar @select="showDetail">
            <ul slot="dateCellRender" slot-scope="value" class="calendar-calendar-ul">
                <li v-for="item in listData" :key="item.key">
                    <a-badge status="default" v-if="item.date.getDate() === value.date() && item.date.getMonth() === value.month() && item.date.getFullYear() === value.year()" :text="item.content" />
                </li>
            </ul>
        </a-calendar>
        <a-modal v-model="detail" title="日程信息" :footer="null">
            <a-form-model :model="form" layout="horizontal" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                <a-form-model-item label="日期">
                    <a-date-picker v-model="form.date" :disabled="true" />
                </a-form-model-item>
                <a-form-model-item label="内容">
                    <a-input />
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="addAppointment" :loading="addLoading">添加</a-button>
                </a-form-model-item>
            </a-form-model>
            <a-table :columns="columns" :data-source="tableData" :pagination="{ 'show-quick-jumper': true, 'show-size-changer': true }">
                <a-button slot="action" type="link" :loading="deleteLoading" @click="deleteAppointment">删除</a-button>
            </a-table>
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: "Calendar",
        data: () => ({
            listData: [
                { key: 1, date: new Date(2020, 8, 10), content: '国债' },
            ],
            detail: false,
            form: {
                date: null,
                content: '',
            },
            addLoading: false,
            deleteLoading: false,
            columns: [
                {
                    title: '序号',
                    dataIndex: 'index',
                    key: 'index',
                },
                {
                    title: '内容',
                    dataIndex: 'text',
                    key: 'text',
                },
                {
                    title: '操作',
                    key: 'action',
                    scopedSlots: { customRender: 'action' },
                }
            ],
            tableData: [
                {
                    key: 1,
                    index: 1,
                    text: '国债',
                }
            ],
        }),
        methods: {
            showDetail(date) {
                this.detail = true;
                this.form.date = date;
            },
            addAppointment() {
                this.addLoading = true;
            },
            deleteAppointment() {
                this.deleteLoading = true;
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.$emit('route');
            });
        }
    }
</script>

<style scoped>
    .calendar-calendar-ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
</style>
